<template>
  <div class="landlord">
    <detail-section title="房东介绍" more-text="查看房东主页">
      <div class="intro">
        <div class="header">
          <img :src="landlordModule.topScroll" alt="" />
        </div>
        <div class="content">
          <div class="left">
            <div class="avatar">
              <img :src="landlordModule.hotelLogo" alt="" />
            </div>
            <div class="infos">
              <div class="name">{{ landlordModule.hotelName }}</div>
              <div class="tags">
                <template
                  v-for="(item, index) in landlordModule.hotelTags"
                  :key="index"
                >
                  <div class="item">{{ item.tagText.text }}</div>
                  <div
                    class="divider"
                    v-if="index !== landlordModule.hotelTags.length - 1"
                  >
                    |
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="contact">联系房东</div>
          </div>
        </div>
        <div class="footer">
          <template
            v-for="(iten, indey) in landlordModule.hotelSummary"
            :key="indey"
          >
            <div class="iten">
              <div class="title">{{ iten.title }}</div>
              <div class="score">{{ iten.introduction }}</div>
              <div class="desc">{{ iten.tip }}</div>
            </div>
          </template>
        </div>
      </div>
    </detail-section>
  </div>
</template>

<script setup>
import DetailSection from "@/components/detail-section/detail-section.vue";

defineProps({
  landlordModule: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<style lang="less" scoped>
  .intro {
    .header {
      img {
        width: 100%;
        border-radius: 3px;
      }
    }

    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;

      .left {
        display: flex;
        align-items: center;

        .avatar {
          margin-right: 5px;

          img {
            width: 54px;
            height: 54px;
          }

        }

        .infos {

          .name {
            font-size: 16px;
            font-weight: 700;
          }

          .tags {
            font-size: 12px;
            color: #9b9b9b;
            display: flex;
            align-items: center;
            margin-top: 5px;

            .divider {
              margin: 0 5px;
            }
          }
        }
      }

      .right {
        height: 24px;
        line-height: 24px;
        border-radius: 5px;
        padding: 0 12px;
        font-size: 12px;
        color: #fff;
        background-image: linear-gradient(90deg, #fa8c1d, #fcaf3f);
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      margin: 50px 10px 10px;
      font-size: 12px;
      .title {
        color: #999;
      }
      .score {
        margin: 8px;
        font-size: 18px;
        color: #333;
        font-weight: 700;
      }

      .desc {
        color: #666;
      }
    }
  }
</style>
